<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      rel="stylesheet"
      href="http://at.alicdn.com/t/font_905916_rnkpnvjj7w.css"
    />
    <link
      rel="stylesheet"
      href="../css/element.css"
    />
    <link rel="stylesheet" href="../css/main.css" />
    <link rel="stylesheet" href="../css/login_register/register.css" />
    <title>修改密码</title>
  </head>

  <body>
    <div
      class="header max_width"
      style="width:100%;height:100px;margin-bottom:-4px;border-bottom: 1px solid rgba(0,0,0,0.15);"
    >
      <div class="wrap">
        <logo></logo>
        <span class="fl login_text">修改密码</span>
      </div>
    </div>
    <div id="app" v-cloak>
      <div class="wrap register_container">
        <!-- 步骤条 -->
        <el-steps
          :active="active"
          align-center
          class="enchange_paswrod"
          space="200px"
        >
          <el-step
            title="原始密码"
            description=""
            icon="iconfont icon-num_1"
          ></el-step>
          <el-step
            title="修改成功"
            description=""
            icon="iconfont icon-num_"
          ></el-step>
          <!--
            <el-step title="更改成功" description="" icon='iconfont icon-mum_'></el-step>
          -->
        </el-steps>

        <!-- 第一步 -->
        <div class="first_step" v-show="first_steap">
          <!-- 手机号、验证码 -->
          <div class="input_wrap">
            <span class="input_tit fl"> 原始密码： </span>
            <input
              type="text"
              name=""
              class="phone_input fl"
              v-model="oldPwd"
            />
          </div>
          <div class="input_wrap">
            <span class="input_tit fl"> 新密码： </span>
            <input type="text" name="" class="phone_input fl" v-model="pwd" />
          </div>
          <div class="input_wrap">
            <span class="input_tit fl"> 确认密码： </span>
            <input type="text" name="" class="phone_input fl" v-model="pwd2" />
          </div>
          <!--
            <div class="input_wrap">
                <span class="input_tit fl">
                    验证码：
                </span>
                <input type="text" name="" class="test_num fl ">
                <div class="fl get_num cursor">获取验证码</div>
            </div>
          -->

          <div class="register_btn cursor" @click="register_btn">下一步</div>
        </div>

        <!-- 第二部 -->
        <div class="first_step" v-show="second_steap">
          <!--
            <div class="register_btn cursor" @click='register_finish'>
                确定
            </div>
          -->
        </div>

        <!-- 第二部 -->
        <div class="first_step" v-show="second_steap">
          <div class="finish_wrap">
            <div class="icons fl">
              <img src="../images/icon_ok.png" alt="" />
            </div>
            <p class="success_text fl">恭喜您，修改密码成功！</p>
          </div>
          <p class="finish_return">
            {{ second }}秒后将跳转至登录页面，或<a href="login.html"
              >点击跳转</a
            >
          </p>
        </div>
      </div>
     <div class="wrap clear_both">             <productfooter></productfooter>         </div>
    </div>
    
    <script src="../js/browser.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/element.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/qs.js"></script>
    <script src="../js/main.js"></script>
    <script type="text/babel">
      var app = new Vue({
        el: "#app",
        data: function() {
          return {
            bodycss: true,
            active: 1,
            first_steap: true,
            second_steap: false,
            third_step: false,
            oldPwd: "",
            pwd: "",
            pwd2: "",
            second: 2
          };
        },
        created() {},
        mounted() {},
        methods: {
          // 第一步到第二部
          register_btn() {
            axios({
              method: "POST",
              url: base_url + "/user/updateUserPwd",
              data: Qs.stringify({
                password: this.oldPwd,
                pwd: this.pwd,
                pwd2: this.pwd2
              }),
              headers: {
                "Content-Type": "application/x-www-form-urlencoded",
                TOKEN: localStorage.getItem("wACCESS_TOKEN")
              }
            })
              .then(function(res) {
                console.log(res);
                if (res.data.code == 1) {
                  app.first_steap = false;
                  app.second_steap = true;
                  app.active = 2;
                  var timer = setInterval(() => {
                    app.second--;
                    if (app.second == 0) {
                      clearInterval(timer);
                      window.location.href = "login.html";
                    }
                  }, 1000);
                } else {
                  app.$message({
                    message: res.data.msg,
                    type: "warning"
                  });
                }
              })
              .catch(function(error) {
                console.log(error);
              });
          }
        }
      });
    </script>
  </body>
</html>
